<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=0">
    <title>错题重做</title>
    <link rel="stylesheet" type="text/css"
          href="../bootstrap/bootstrap.4.1.0.css">

    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../bootstrap/popper.12.5.min.js"></script>
    <script src="../bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="../layui/layer/layer.js"></script>

    <style type="text/css">

        #app {

            height: 80%;
            width: 80%;



        }

        .choose {
            float: left;

        }

        .custom-select {
            margin: 20px;
            width: 200px;
        }

        .question {
            width: 600px;
            margin: 20px;
            min-height: 300px;
            height: auto;

            border-radius: 10px;
            box-shadow: 2px 2px 3px 5px #e1e1e1;

        }

        .selectQuestion {
            position: relative;
            margin: 40px;
            height: auto;
        }

        .question p {
            margin: 10px;


        }


    </style>

</head>
<body>
<div id="app" class="container">

    <div class="choose">
        <b>请选择您想练习的错题类型：</b>
        <select class="custom-select" v-model="questionsType" @change="getErrorQuestion()">
            <option value="0">请选择题型</option>
            <option value="1">选择题</option>
            <option value="2">填空题</option>
            <option value="3">材料题</option>
            <option value="4">完形填空</option>
            <option value="5">短文改错</option>
        </select>
    </div>
    <div style="clear: both;margin: 0px"></div>
    <div style="margin: 20px;width:600px">
        <button @click="pre()" class="btn btn-info" style="float: left">上一题</button>
        <button @click="current()" class="btn btn-info" style="margin-left: 190px">回到当前</button>
        <button @click="next()" class="btn btn-info" style="float: right">下一题</button>
    </div>
    <div style="clear: both"></div>
    <div style="overflow:hidden;">

        <div class="question" v-if="questionsType==1">

            <div class="selectQuestion">
                <br>


                <p><b>{{currentQuestion.selectBank.selectTopic}}</b>(<b>{{currentQuestion.knowledgepoint.gradeType}}{{currentQuestion.knowledgepoint.subject}}</b>)
                </p>
                <p v-if="currentQuestion.selectBank.selectImg!=null"><img src="currentQuestion.selectBank.selectImg">
                </p>

                <p>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="custom-radio" value="A" :disabled="currentQuestion.toShow==true"
                               v-model="currentQuestion.thisAnswer">
                        A.{{currentQuestion.selectBank.selectOptionsa}}
                    </label>
                </div>
                </p>
                <p>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="custom-radio" value="B" :disabled="currentQuestion.toShow==true"
                               v-model="currentQuestion.thisAnswer">
                        B.{{currentQuestion.selectBank.selectOptionsb}}
                    </label>
                </div>
                </p>
                <p>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="custom-radio" value="C" :disabled="currentQuestion.toShow==true"
                               v-model="currentQuestion.thisAnswer">
                        C.{{currentQuestion.selectBank.selectOptionsc}}
                    </label>
                </div>
                </p>
                <p>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="radio" class="custom-radio" value="D" :disabled="currentQuestion.toShow==true"
                               v-model="currentQuestion.thisAnswer">
                        D.{{currentQuestion.selectBank.selectOptionsd}}
                    </label>
                </div>
                </p>
                <p v-if="currentQuestion.knowledgepoint!=null" style="color: #2D93CA">
                    考察知识点：{{currentQuestion.knowledgepoint.kdname}}</p>
                <p>
                    <button @click="showAnalyze()" class="btn-outline-primary">确认答案</button>
                </p>
                <p :style="currentQuestion.toShow? '':'display: none'">
                    <b v-if="currentQuestion.selectBank.selectAnswer==currentQuestion.thisAnswer" style="color: green">正确✔</b>
                    <b v-if="currentQuestion.selectBank.selectAnswer!=currentQuestion.thisAnswer"
                       style="color: red">错误×</b>

                </p>
                <p :style="currentQuestion.toShow? '':'display: none'">
                    <b style="color: green">做对次数：</b>{{currentQuestion.countCorrect}}<br>
                    <b style="color: red">做错次数：</b>{{currentQuestion.countError}}

                </p>


                <p :style="currentQuestion.toShow? '':'display: none'">
                    <b>解析：</b>{{currentQuestion.selectBank.selectAnalyze}}</p>
                <br>

            </div>


        </div>


        <div class="question" v-if="questionsType==2">


            <div class="selectQuestion">
                <p v-if="currentQuestion.knowledgepoint!=null" style="color: #2D93CA">
                    考察知识点：{{currentQuestion.knowledgepoint.kdname}}</p>
                <p>
                    <button @click="showAnalyze()" class="btn-outline-primary">确认答案</button>
                </p>
                <p :style="currentQuestion.toShow? '':'display: none'">
                    <b v-if="currentQuestion.selectBank.selectAnswer==currentQuestion.thisAnswer" style="color: green">正确✔</b>
                    <b v-if="currentQuestion.selectBank.selectAnswer!=currentQuestion.thisAnswer"
                       style="color: red">错误×</b>

                </p>
                <p :style="currentQuestion.toShow? '':'display: none'">
                    <b style="color: green">做对次数：</b>{{currentQuestion.countCorrect}}<br>
                    <b style="color: red">做错次数：</b>{{currentQuestion.countError}}

                </p>


                <p :style="currentQuestion.toShow? '':'display: none'">
                    <b>解析：</b>{{currentQuestion.selectBank.selectAnalyze}}</p>
                <br>


            </div>


        </div>


    </div>

</div>
</body>
<script type="text/javascript">

    var app = new Vue({
            el: '#app',
            data: {
                questionsType: 0,
                errorQuestions: [],
                currentQuestion: "",
                finishIndex: 0,
                currentIndex: 0,


            },
            mounted() {


            }
            ,
            // 方法
            methods: {
                getErrorQuestion: function () {

                    if (this.questionsType == 0) {
                        return;
                    }
                    axios.get("/ErrorQuestionController/getErrorQuestion/" + 1 + "/" + this.questionsType).then(
                        res => {
                            if (res.data.code === 200) {
                                this.errorQuestions = res.data.data;
                                console.log(this.errorQuestions);

                                layer.confirm('是否从上次位置继续？', {
                                    btn: ['好的', '从头再来'] //按钮
                                }, function () {

                                    axios.get("/getIndex/" + 1 + app.questionsType).then(
                                        res => {
                                            if (res.data.code === 200) {
                                                app.currentIndex = res.data.data;

                                                app.currentQuestion = app.errorQuestions[app.currentIndex];

                                            } else {
                                                layer.alert("定位失败，从新开始吧");
                                            }
                                        })

                                }, function () {
                                    console.log(app.errorQuestions);
                                    app.currentQuestion = app.errorQuestions[app.currentIndex];

                                });

                            } else {
                                layer.alert("网络繁忙，请稍后再试");
                            }
                        })
                }
                ,
                next: function () {
                    if (this.currentQuestion.thisAnswer == "" || this.currentQuestion.thisAnswer == null) {
                        layer.msg("还没有答题哦");
                        return;
                    }
                    $('.question').animate({'margin-left': '-800px'}, 500, function () {



                        if (app.currentIndex >= app.errorQuestions.length - 1) {

                            $('.question').animate({'margin-left': '20px'}, 500);
                            layer.confirm('复习完成，是否重做一次？', {
                                btn: ['好的', '算了'] //按钮
                            }, function () {

                                axios.get("/ErrorQuestionController/getErrorQuestion/" + 1 + "/" + app.questionsType).then(
                                    res => {
                                        if (res.data.code === 200) {
                                            app.errorQuestions = res.data.data;
                                            app.currentIndex = 0;
                                            app.currentQuestion = app.errorQuestions[app.currentIndex];

                                        }
                                        $('.question').css("margin-left", "-800px");
                                        $('.question').animate({'margin-left': '20px'}, 500);
                                        layer.msg("已跳至开头");
                                        return;
                                    })

                            }, function () {
                                layer.msg("已做所有错题");
                                $('.question').animate({'margin-left': '20px'}, 500);
                                app.currentIndex = app.finishIndex;
                                app.currentQuestion=app.errorQuestions[app.currentIndex];
                                return;
                            });
                        }
                        app.currentIndex = app.currentIndex + 1;
                        app.currentQuestion = app.errorQuestions[app.currentIndex];
                        $('.question').css("margin-left", "800px");
                        $('.question').animate({'margin-left': '20px'}, 500);

                    });


                },
                pre: function () {
                    $('.question').animate({'margin-left': '800px'}, 500, function () {


                        if (app.currentIndex <= 0) {
                            layer.msg("已到第一题")
                            $('.question').css("margin-left", "800px");
                            $('.question').animate({'margin-left': '20px'}, 500);
                            return;
                        }
                        app.currentIndex = app.currentIndex - 1;
                        app.currentQuestion = app.errorQuestions[app.currentIndex];
                        $('.question').css("margin-left", "-800px");
                        $('.question').animate({'margin-left': '20px'}, 500);
                    });
                },
                current: function () {

                    $('.question').css("margin-left", "800px");
                    $('.question').animate({'margin-left': '20px'}, 500);

                    app.currentIndex = app.finishIndex;
                    app.currentQuestion = app.errorQuestions[app.currentIndex];
                },
                showAnalyze: function () {
                    if (this.currentQuestion.selectBank.selectAnswer==this.currentQuestion.thisAnswer){
                        if (this.currentQuestion.countCorrect>=2){
                            this.questions.splice(this.currentIndex, 1);
                            layer.msg("恭喜你成功做对三次，已移出错题库");
                        }else {
                        this.currentQuestion.countCorrect=this.currentQuestion.countCorrect+1;
                        }
                    }else{
                        this.currentQuestion.countError=this.currentQuestion.countError+1;
                    }

                    // this.currentQuestion.toShow=true;
                    this.finishIndex = this.currentIndex;
                    this.currentQuestion.toShow = true;

                }


            }
        })
    ;


</script>
</html>